<template>
    <a-modal :title="$t('告警数量上限')" v-model='isShow' @cancel='handleClose' width='35%' @ok='handleSubmit'
        :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
        <a-form :form='form'>
            <a-form-item :label="$t('告警数量上限')" v-bind="formLayout">
                <!-- { pattern: /^(0|[1-9][0-9]*)$/, message: '只能输入零和非零开头的数字' }, -->
                <div style="display: flex;align-items: center;">
                    <a-input :disabled="isDisabled" style="width: 298px;" v-decorator="['count', {
                        rules: [
                            { required: !checked, message: $t('Enter') + $t('告警数量上限') },
                            { validator: compareToFirstPassword },
                        ], initialValue: formData.count
                    }]" :placeholder="$t('Enter') + $t('告警数量上限')" :addon-after="$t('条')" />
                    <a-checkbox v-model="checked" @change="handleChange" size="small" style="margin-left: 16px">
                        <span>{{ $t('无限制') }}</span>
                    </a-checkbox>
                </div>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
            form: this.$form.createForm(this),
            formLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 18 }
            },
            formData: {
                count: ''
            },
            checked: false,
            isDisabled: false
        }
    },
    methods: {
        handleChange(e) {
            if (e.target.checked) {
                this.isDisabled = true
                this.formData.count = ''
                this.form.resetFields(['count']);
            } else {
                this.isDisabled = false
            }
        },
        handleSubmit() {
            // this.isShow = false

            this.form.validateFields(async (err, value) => {
                if (!err) {
                    let count = value.count
                    if (this.checked) count = -1
                    const { data } = await this.$api.alarm.modifyAlarmCount({ count })
                    if (data.flag == 1) {
                        this.model(data.id) //返回模板
                        this.notice(data.id, data.params, data.flag) //通知列表显示
                    } else {
                        this.$emit('get-num')
                        this.$message.success(this.$t('修改成功'))
                    }
                    this.isShow = false;
                    this.form.resetFields()
                }
            })
        },
        handleClose() {
            this.form.resetFields();
            this.isShow = false
        },
        compareToFirstPassword(rule, value, callback) {
            const reg =  /^(0|[1-9][0-9]*)$/
            if (value === '') callback()
            if (!reg.test(value)) {
                callback(this.$t('只能输入零和非零开头的数字'))
            }
            if (value < 1 || value > 100000) {
                callback(this.$t('请输入范围在1-100000的数字'));
            } else {
                callback();
            }
        },
    }
}
</script>